<template>
    <div class="permiss">
        <div class="content">
             <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>权限列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="table">
                <el-table :data="tableData" height="100%" border style="width: 100%;" stripe>
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
                    <el-table-column prop="path" label="路径" width="180"></el-table-column>
                    <el-table-column prop="level" label="层级">
                         <template slot-scope="scope">
                            <span v-if="scope.row.level == 0">一级</span>
                            <span v-else-if="scope.row.level == 1">二级</span>
                            <span v-else>三级</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { permiss, list } from "../api/api.js";
export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
         getpermiss(){
            permiss({
                type:"list"
            }).then(res=>{
                if(res.data.meta.status>=200&&res.data.meta.status<300){
                    console.log("权限列表",res);
                    this.tableData = res.data.data
                }
            })
        },
    },
    created() {
        this.getpermiss();
    }
  }
</script>

<style scoped lang="scss">
    .permiss{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        .content{
            width:97%;
            height:95%;
            display:flex;
            flex-direction: column;
            .table{
                width:97%;
                height:82%;
                margin-top:18px;
            }
        }
    }
</style>
